<template>
    <div class="key_group">
    <!--年月份选择器-->
      <!--<el-select class="select_date" @change="choicYear(value)" v-model="value" placeholder="请选择年月份">-->
        <!--<el-option-->
          <!--v-for="item in options"-->
          <!--:key="item.value"-->
          <!--:label="item.label"-->
          <!--:value="item.value">-->
        <!--</el-option>-->
      <!--</el-select>-->

    <!--年月份选择器-->

   <div class="key_group_box">
            <div class="title">
               <!--<div class="total">重点人群总数:<span class="value">{{totalData.male+totalData.female}}人</span></div>-->
               <!--<div class="nan">男:<span class="value">{{totalData.male}}人</span></div>-->
               <!--<div class="nv">女:<span class="value">{{totalData.female}}人</span></div>-->
            </div>

            <div class="user_list">

                <NoData v-if="flag"></NoData>
                <!--<NoData v-if="monthData.length==0"></NoData>-->
                <div class="user" v-for="item in totalData">
                    <!--<span class="user_type">{{item.title}}</span>-->
                    <span class="user_type">{{item.tags_name}}</span>
                    <span class="user_num">{{item.num}}人</span>
                </div>
            </div>
   </div>





      <!--未开发时候显示-->
      <p v-if="false" style="font-size: 60px;color: #cccccc;position: absolute;left: 50%;top:40%;transform:translateY(-50);transform:translateX(-50%)">正在建设...</p>
      <!--未开发时候显示-->
    </div>
</template>

<script>
    import NoData from '../../../components/nodata/NoData'
    export default {
        name: "keyGroups",
        data(){
          return{
            totalData: {},
            monthData: [],
            options: [],
            value: '',//选中的value值
            time: '',//评定时间
            date: '',
            flag:false,//是否显示暂无数据，默认不显示
          }
        },

      components:{
        NoData,
      },







       created(){
          this.options=this.$util.selectYearMonth();
          this.$emit("childData",this.$route.query.childdata);

       },


        mounted() {
          this.getData();

          // let date = new Date();
          // let year = date.getFullYear();
          // let month = date.getMonth()+1;
          // this.getMonthData(year+"-"+month);

        },
        methods:{


          choicYear(y) {
              console.log('当前年月日：',this.options[y].label);
              this.getMonthData(this.options[y].label);
          },




          // 获取数据
          // getData(){
          //   let that = this;
          //   that.$http.get("api/GriderPcApi/getImportantManNum?vollege_id="+that.$util.vollege_id, null, r=>{
          //     console.log(r)
          //     that.totalData = r.data
          //   })
          // },

          getData(){
            let that = this;
            that.$http.get("api/DataCenterApi/importantMemberCount?vollege_id="+that.$util.vollege_id, null, r=>{
              console.log(r)
              that.totalData = r.data;
              console.log('r.data.length:',r.data.length)
              if (r.data.length==0){
                this.flag=true;
              }
            })
          },

          // 获取数据

          getMonthData(month){
            let that = this;
            that.$http.get("api/DataCenterApi/importantMemberCount?vollege_id="+that.$util.vollege_id, null, r=>{
              console.log('获取数据类型为：',r.data);
              that.monthData = r.data
              if (r.data.length==0){
                this.flag=true;
              }
            })
          },
          // getMonthData(month){
          //   let that = this;
          //   that.$http.get("api/GriderPcApi/getImportantManByMonth?vollege_id="+that.$util.vollege_id+"&month="+month, null, r=>{
          //     console.log('获取数据类型为：',r.data);
          //     that.monthData = r.data
          //     if (r.data.length==0){
          //       this.flag=true;
          //     }
          //   })
          // },

        }

    }
</script>

<style scoped>
  .key_group{
    height: 700px;
    width: 100%;
    box-sizing: border-box;
    padding-right: 30px;
    padding-left: 30px;

  }
  .key_group_box{
    height: 100%;
    width: 100%;
  }
  .title{
    height: 100px;
    width: 100%;
    display: flex;
  }
  .total{
    line-height: 100px;
    font-size: 30px;
    color: black;
    font-family: 微软雅黑;
    display: flex;
    align-items: center;
    flex: 1;
  }
  .nan{
    line-height: 100px;
    font-size: 30px;
    color: black;
    font-family: 微软雅黑;
    display: flex;
    align-items: center;
    flex: 1;
  }
  .nv{
    line-height: 100px;
    font-size: 30px;
    color: black;
    font-family: 微软雅黑;
    display: flex;
    align-items: center;
    flex: 1;
  }
  .value{
    color: #29be74;
    padding-left: 20px;
  }
  .user_list{
    height: 100%;
    width: 100%;
    /*margin-top: 40px;*/
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .user{
    width: 300px;
    height: 150px;
    border: 1px solid #cccccc;
    box-shadow: 4px 4px 16px #cccccc;
    margin-right: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 20px;


  }
  .user_type{
     font-size: 26px;
     color: black;
     font-weight: bold;
  }
  .user_num{
     font-size: 42px;
     color: #02c070;
  }





</style>
